<template>
	<div class="left-box">
		<div class="heade-wrapper">
			<a-input-search
				v-model.trim="keyword"
				:placeholder="placeText"
				@search="onSearch"
				@keyup.enter="onSearch"
			/>
		</div>

		<div class="content-wrapper">
			<top-bottom-layout>
				<template #top>
					<scroll-list
						ref="varList"
						:checkAllShow="false"
						:checkBoxStrictly="true"
						:initSearchValue="initVarSearchValue"
						:showCheckbox="true"
						:singleAndMult="true"
						disabledProp="canSelect"
						command="varList"
						panel="OrgSystemVar"
						@toCheckValueClickProp="onClickSystemVarItem"
						@checked="onCheckSystemVar"
					></scroll-list>
				</template>
				<template #middle></template>
				<template #bottom>
					<scroll-list
						ref="relativeRoleList"
						:checkAllShow="false"
						:firstLoadSearch="false"
						:showCheckbox="true"
						command="relativeRoleList"
						panel="OrgSystemVar"
					></scroll-list>
				</template>
			</top-bottom-layout>
		</div>
	</div>
</template>

<script>
import scrollList from '@/components/scrollList';
import topBottomLayout from '@/components/topBottomLayout.vue';
import { mapActions } from 'vuex';
import { ACTION_TOGGLE_ENTITY } from '@/store/actionTypes';

export default {
	name: 'OrgSystemVarPanel',
	components: {
		scrollList,
		topBottomLayout
	},
	inject: ['app'],
	data() {
		return {
			// 当前机构
			accountId: '',
			// 搜索框相关
			placeText: this.$i18n('org.node.label') + this.$i18n('common.name.label'),
			panelScopeType: '',
			panelSelectType: '',
			keyword: '',
			// 组织变量列表
			initVarSearchValue: {
				panelScopeType: '',
				panelSelectType: ''
			},
			varId: '',
			varName: ''
		};
	},
	computed: {
		orgSelect() {
			return this.app().orgSelect;
		}
	},
	methods: {
		...mapActions('selectData',[ACTION_TOGGLE_ENTITY]),
		/*
		 * 搜索框: 发起搜索并更新相对岗位列表
		 * @param val 搜索框中输入的值
		 * **/
		onSearch() {
			if (this.varId.length <= 0 || this.varName.length <= 0) {
				return;
			}
			this.refreshRelativeRoleList();
		},

		/*
		 * 机构选择框: 修改机构后回调
		 * @param data 当前选择机构对象
		 * */
		onChangeAccount(data) {
			this.accountId = data.id;

			this.keyword = '';
			this.varId = '';
			this.varName = '';

			this.$refs.varList.initProps();
			this.$refs.relativeRoleList.initProps();

			this.$refs.varList.search(this.initVarSearchValue);
		},

		/*
		 * 组织变量列表: 点击单个选项
		 *
		 * */
		onClickSystemVarItem(el) {
			this.varId = el.id;
			this.varName = el.name;

			this.refreshRelativeRoleList();
		},

		/*
		 * 组织变量列表: 选项勾选调整
		 *
		 * */
		onCheckSystemVar(el) {
			this[ACTION_TOGGLE_ENTITY]({
				entities: el
			});
		},

		/*
		 *  相对角色列表: 刷新相对角色列表
		 * */
		refreshRelativeRoleList() {
			let params = {};
			params.varId = this.varId;
			params.varName = this.varName;
			params.accountId = this.accountId;
			params.keyword = this.keyword;
			params.panelSelectType = this.panelSelectType;

			this.$refs.relativeRoleList.initProps();
			this.$refs.relativeRoleList.search(params);
		}
	},

	mounted() {
		let selectOrgConfig = this.orgSelect.appParams.selectOrgConfig;
		if (this.app().switchAfterUnit && this.app().switchAfterUnit.id) {
			this.accountId = this.app().switchAfterUnit.id;
		} else {
			this.accountId = this.orgSelect.defaultAccountId;
		}
		this.panelScopeType = selectOrgConfig.panelScopeType;
		this.panelSelectType = selectOrgConfig.panelSelectType;

		this.initVarSearchValue.panelScopeType = selectOrgConfig.panelScopeType;
		this.initVarSearchValue.panelSelectType = selectOrgConfig.panelSelectType;
	}
};
</script>

